 <template>
  <div class="box">
      <div class="query">
            <div class="query_title">
              <div></div>
              <div class="query_title_right">
                <div></div>
                <div></div>
                <div class="el-icon-s-home conthome" @click="clickrouter"></div>
              </div>
            </div>
            <div class="query_cont">
              <div class="query_hader">
                <div
                  style="margin-top: 6px"
                  v-for="(item, index) in items"
                  :key="index"
                  @click="onclick(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "产能统计", path: "/function_statis" },
        { name: "单一产品缺陷分析", path: "/function_produce" },
        { name: "缺陷对比分析", path: "/function_capacity" },
        { name: "产能对比分析", path: "/function_glo" },
        { name: "缺陷数据统计", path: "/function_table" },
        { name: "产品履历查询", path: "/function_serch" },
        { name: "缺陷密集性分析", path: "/function_drawback" },
        { name: "设备密集性分析", path: "/function_facility" },
        { name: "复判人员产能统计", path: "/function_staff" },
        { name: "复判人员产密集性统计", path: "/function_query" },
      ],
    };
  },
  methods: {
    onclick(item) {
      this.$router.push(item.path);
    },
    clickrouter() {
      this.$router.back(-1);
    },
  },
};
</script>

<style  scoped>
.box {
  width: 100%;
}
.query {
  width: 95%;
  /* position: relative; */
  /* border:1px solid #000; */
  margin: 0 auto;
}
.query_cont {
  width: 95%;
  height: 90%;
  margin: 50px auto;
  /* border:1px solid red; */
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/bg_image.jpg") no-repeat center;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-attachment: fixed;
  /* background: gainsboro; */
}

.query_hader {
  width: 40%;
  /* border: 1px solid #ffffff; */
  margin-left:50%;
  color: #ffffff;
  cursor: pointer;
  font-size:20px;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  flex-wrap: wrap;
  display:flex;
  margin-top:10px;
}
.query_hader div
{
  margin-left:70px;
  margin-bottom:20px;
}


.query_title {
  width: 100%;
  height: 40px;
  /* border:1px solid blue;  */
  display: flex;
  justify-content: space-between;
  background: ghostwhite;
  box-shadow: 0px, 0px, 0px, 1px ghostwhite;
}

.query_title_right {
  width: 20%;
  /* border:1px solid #000; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.conthome {
  font-size: 30px;
}
</style>